<template>
	<!-- web 签到 -->
	<div class="sing-in-div">
		<div class="sing-in-div-body">
			<div class="sing-in">
				<div class="sing-in-img">
					<img :src='nosignin' alt="已签到">
				</div>
				<div class="sing-in-message">
					<h5>签到情况如下</h5>
					<div class="students-list-container">
						<p class="students-list" v-for="(student, index) in paginatedStudents" :key="index">
							<span>{{ student.name }}</span>
							<span class="status">{{ student.signStatus }}</span>
						</p>
					</div>
					<!-- 分页 -->
					<div class="page-help-div">
						<p class="page-help-p">
							<span @click="goToPage(1)">首页</span>
							<span @click="prevPage" :class="{ disabled: currentPage === 1 }">上一页</span>
							<span>{{ currentPage }}</span>
							<span @click="nextPage" :class="{ disabled: currentPage === totalPages }">下一页</span>
							<span @click="goToPage(totalPages)">尾页</span>
						</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
	import nosignin from '../../static/noSingIn.png';
	import {
		ref,
		computed
	} from 'vue';

	// 学生列表数据
	const students = ref([{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			}, {
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "未签到"
			}, {
				name: "zhangsan",
				signStatus: "未签到"
			},
			{
				name: "zhangsan",
				signStatus: "已签到"
			},
			{
				name: "zhangsan",
				signStatus: "未签到"
			},
			{
				name: "zhangsan",
				signStatus: "未签到"
			}
		]);

	// 每页显示的条目数
	const pageSize = ref(5);

	// 当前页码
	const currentPage = ref(1);

	// 总页数计算属性
	const totalPages = computed(() => Math.ceil(students.value.length / pageSize.value));

	// 分页后的学生数据计算属性
	const paginatedStudents = computed(() => {
		const start = (currentPage.value - 1) * pageSize.value;
		const end = start + pageSize.value;
		return students.value.slice(start, end);
	});

	// 跳转到指定页
	const goToPage = (page) => {
		if (page >= 1 && page <= totalPages.value) {
			currentPage.value = page;
		}
	};

	// 上一页
	const prevPage = () => {
		if (currentPage.value > 1) currentPage.value--;
	};

	// 下一页
	const nextPage = () => {
		if (currentPage.value < totalPages.value) currentPage.value++;
	};
</script>

<style scoped>
	.sing-in-div {
			background-color: transparent;
			width: 100vw;
			/* 设置一个固定的宽度 */
			height: 100vh;
			/* 设置一个固定的高度 */
			position: fixed;
			/* 固定位置 */
			top: 50%;
			/* 定位到屏幕中间 */
			left: 50%;
			/* 定位到屏幕中间 */
			transform: translate(-50%, -50%);
			/* 精确居中 */
			display: flex;
			justify-content: center;
			align-items: center;
			/* overflow: hidden; 防止内容溢出 */
			z-index: 1000;
			/* 确保它在其他内容之上 */
		}
	
		.sing-in-div-body {
			background-color: beige;
			width: 100%;
			/* 占据父容器的 90% */
			height: 90%;
			/* 占据父容器的 90% */
			display: flex;
			justify-content: center;
			align-items: center;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			border-radius: 8px;
		}
	
		.sing-in {
			position: relative;
			background-color: white;
			width: 660px;
			height: 390px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
			/* 可选：添加阴影效果 */
			border-radius: 8px;
			/* 可选：添加圆角 */
		}
	
		.sing-in-img {
			position: absolute;
			top: -120px;
			/* background-color: aqua; */
		}
	
		.sing-in-img img {
			display: inline-block;
			width: 200px;
			height: auto;
			/* 自动调整高度以保持比例 */
			object-fit: cover;
			/* 或者 contain, 根据需要选择 */
		}
	
		.sing-in-message {
			position: absolute;
			top: 70px;
			text-align: center;
	
		}
	
		.sing-in-message h5 {
			font-size: 24px;
			margin-bottom: 1rem;
			/* 设置 h5 和 p 之间的间距 */
		}
	
		.sing-in-message p {
			margin-bottom: 10px;
		}
	
	
		.students-list-container {
			width: 330px;
			height: 200px;
			/* 固定高度 */
			overflow: hidden;
			/* 隐藏溢出的内容 */
			position: relative;
		}
	
		.students-list {
			display: flex;
			flex-wrap: wrap;
			/* 允许 span 标签换行 */
			justify-content: center;
			/* 水平居中 span 标签 */
			gap: 0.5rem;
			/* 设置 span 标签之间的间隔 */
		}
	
		.students-list span {
			background-color: #f0f0f0;
			/* 给 span 添加背景色以便于观察 */
			padding: 0.5rem;
			/* 设置内边距 */
			border-radius: 4px;
			/* 圆角 */
			flex: 0 0 auto;
			/* 确保 span 的大小不会改变 */
			width: 6rem;
			/* 固定宽度 */
			height: 2rem;
			/* 固定高度 */
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			/* 确保 padding 不会增加元素的实际尺寸 */
		}
	
		.page-help-div {
			margin-top: 15px;
		}
	
		.page-help-p span {
			padding: 5px 8px;
			border: 1px gray solid;
			margin-right: 5px;
		}
	/* ... 你的样式代码保持不变 ... */
	.page-help-p span {
		padding: 5px 8px;
		border: 1px gray solid;
		margin-right: 5px;
		cursor: pointer;
	}

	.page-help-p span.disabled {
		color: #ccc;
		border-color: #ccc;
		cursor: not-allowed;
	}
</style>